<template>
  <div class="paper-bg">
    <!-- 上：横向天气预报区 -->
    <section class="weather-strip">
      <!-- 实时天气 -->
      <div class="weather-card mini">
        <div class="w-left">
          <img :src="weatherIcon" class="w-icon" />
          <div>
            <div class="w-temp">{{ weather.realTime?.wtTemp }}°C</div>
            <div class="w-city">{{ weather.area_2 }} · {{ weather.realTime?.wtNm }}</div>
          </div>
        </div>
        <div class="w-right">
          <div>{{ weather.realTime?.wtWindNm }} </div>
          <div>能见度{{ weather.realTime?.wtVisibility }}km </div>
          <div>空气质量：<span>{{ getAqiLevel(weather.realTime?.wtAqi) }}</span></div>
          <div>降雨量{{ weather.realTime?.wtRainfall??"--"}}mm</div>
        </div>
      </div>

      <!-- 今日 -->
      <div class="weather-card mini" v-if="weather.today">
        <div class="today-title">今日</div>
        <div class="today-line">
          <img :src="getWeatherIcon(weather.today.wtIcon1, 'd')" class="today-icon" />
          <span>白天 {{ weather.today.wtTemp1 }}°C</span>
        </div>
        <div class="today-line">
          <img :src="getWeatherIcon(weather.today.wtIcon2, 'n')" class="today-icon" />
          <span>夜间 {{ weather.today.wtTemp2 }}°C</span>
        </div>
        <div class="today-line">{{ weather.today?.lifeIndex?.uv?.liDese ?? '--' }}</div>
        <div class="today-line">{{ weather.today?.lifeIndex?.ct?.liDese ?? '--' }}</div>
      </div>

      <!-- 逐小时 -->
      <div class="weather-card mini scroll-x" v-if="weather.futureHour?.length">
        <div class="hour-title">24h</div>
        <div class="hour-list">
          <div class="hour-cell" v-for="(h, i) in weather.futureHour.slice(0, 12)" :key="i">
            <div>{{ formatHour(h.dateYmdh) }}</div>
            <img :src="getWeatherIcon(h.wtIcon, 'd')" class="hour-icon" />
            <div>{{ h.wtTemp }}°</div>
          </div>
        </div>
      </div>

      <!-- 7天 -->
      <div class="weather-card mini scroll-x" v-if="weather.futureDay?.length">
        <div class="day-title">7天</div>
        <div class="day-list">
          <div class="day-cell" v-for="(d, i) in weather.futureDay" :key="i">
            <div>{{ d.week }}</div>
            <img :src="getWeatherIcon(d.wtIcon1, 'd')" class="day-icon" />
            <div>{{ d.wtTemp1 }}° / {{ d.wtTemp2 }}°</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 下：双地图并列 -->
    <section class="map-area">
      <div class="map-box" v-for="m in maps" :key="m.name">
        <img :src="m.img" class="map-img" :alt="m.name" />
        <div class="map-label">{{ m.name }}</div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, computed } from 'vue'
import lhMap from '@/assets/images/map/lhmap4.png'
import zyMap from '@/assets/images/map/zymap.png'

/* ---------------- 数据 ---------------- */
const weather = reactive({
  area_1: '',
  area_2: '',
  realTime: null,
  today: null,
  futureDay: [],
  futureHour: []
} as any)

const maps = [
  { name: '龙湖校区', img: lhMap },
  { name: '中原校区', img: zyMap }
]

/* ---------------- 图标：一次性静态扫进来 ---------------- */
// 1. 把 d 和 n 目录下所有 png 都抓到
const dModules = import.meta.glob('/src/assets/icons/d/*.png', { eager: true, as: 'url' })
const nModules = import.meta.glob('/src/assets/icons/n/*.png', { eager: true, as: 'url' })

// 2. 做成 { "00": "/assets/00.1234abcd.png", ... } 的映射表
const iconMap = {
  d: Object.fromEntries(
      Object.entries(dModules).map(([path, url]) => {
        const key = (path.match(/\/(\w+)\.png$/) || ['', ''])[1]
        return [key, url as string]
      })
  ),
  n: Object.fromEntries(
      Object.entries(nModules).map(([path, url]) => {
        const key = (path.match(/\/(\w+)\.png$/) || ['', ''])[1]
        return [key, url as string]
      })
  )
} as Record<'d' | 'n', Record<string, string>>

/* ---------------- 方法 ---------------- */
// 3. 运行时纯映射，不再 new URL
function getWeatherIcon(icon: string, time: 'd' | 'n') {
  return iconMap[time][icon] || iconMap.d['00'] // 给张默认图兜底
}

const weatherIcon = computed(() => {
  if (!weather.realTime?.wtIcon) return ''
  const t = new Date().getHours() >= 6 && new Date().getHours() < 18 ? 'd' : 'n'
  return getWeatherIcon(weather.realTime.wtIcon, t)
})

const getAqiLevel = (aqi: string | number) => {
  const n = Number(aqi)
  if (n <= 50) return '优'
  if (n <= 100) return '良'
  if (n <= 150) return '轻度污染'
  if (n <= 200) return '中度污染'
  if (n <= 300) return '重度污染'
  return '要死啦TwT!!!'
}

const formatHour = (dateStr: string) => new Date(dateStr).getHours() + ':00'

/* ---------------- 获取天气 ---------------- */
async function loadWeather() {
  try {
    const res = await fetch(
        'https://sapi.k780.com/?app=weather.realtime&weaid=59&ag=today,futureDay,lifeIndex,futureHour&appkey=74991&sign=8ffd733adbca522bf3cbcbe34fd62065&format=json'
    )
    const data = await res.json()
    if (data.success === '1') Object.assign(weather, data.result)
  } catch (e) {
    console.error('天气加载失败:', e)
  }
}

onMounted(loadWeather)
</script>

<style scoped>
/* ====== 基础 ====== */
.paper-bg {
  min-height: 100vh;
  background: url('@/assets/images/paper.jpg') center/cover;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  color: #000; /* 黑色字体 */
}

/* ====== 横向天气条 ====== */
.weather-strip {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;        /* 关键：允许换行 */
  gap: 16px;
  padding-bottom: 8px;
}
/* 迷你天气卡片 */
.weather-card.mini {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 200px;
}

.w-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.w-icon {
  width: 48px;
  height: 48px;
}
.w-temp {
  font-size: 24px;
  font-weight: 700;
}
.w-city {
  font-size: 14px;
  opacity: 0.8;
}
.w-aqi {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  color: #fff;
}
.w-right {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
}

.today-title,
.hour-title,
.day-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.today-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.today-icon,
.hour-icon,
.day-icon {
  width: 28px;
  height: 28px;
}

/* 横向滚动列表 */
.scroll-x .hour-list,
.scroll-x .day-list {
  display: flex;
  flex-wrap: wrap;        /* 让小时/日期自动折行 */
  gap: 12px;
}
.hour-cell,
.day-cell {
  font-size: 12px;
  text-align: center;
  /* 不需要固定宽度，让 flex 自动排 */
}

/* ====== 地图区域 ====== */
.map-area {
  width: 100%;
  max-width: 1400px;
  display: flex;
  gap: 24px;
}
.map-box {
  flex: 1 1 50%;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.map-label {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
}

/* ====== 响应式 ====== */
@media (max-width: 1024px) {
  .weather-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .weather-card.mini {
    min-width: unset;
  }
  .map-area {
    flex-direction: column;
  }
}
</style>
